<template>
  <div class="factor-list-container" v-loading="loading">
    <CTable
      :dataSource="dataSource"
      useDataSource
      :pagination="false"
      border
      :extraTableOption="extraTableOption"
    >
      <vxe-column title="范围" width="100">
        <template #default="scope">
          <span>{{
            scope.row.emissionScope
              ? getI18nNameBySeparator(scope.row.emissionScope, 'task')
              : scope.row.emissionScope
          }}</span>
        </template>
      </vxe-column>
      <vxe-column title="排放类别" width="200">
        <template #default="scope">
          <span>{{
            scope.row.emissionCategory
              ? $t18(`task.${scope.row.emissionCategory}`)
              : scope.row.emissionCategory
          }}</span>
        </template>
      </vxe-column>
      <vxe-column title="温室气体源类型" width="150">
        <template #default="scope">
          <span>{{ empty(scope.row.ghgSourceName) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="排放源">
        <template #default="scope">
          <span>{{ empty(scope.row.sourceName) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="能源/燃料" min-width="140" show-header-overflow="tooltip">
        <template #default="scope">
          <div class="g-flex-start-center">
            <span class="ems-label g-ell">{{ empty(scope.row.materialName) }}</span>
            <span class="ems-tag" v-if="scope.row.dataSource === 'EMS'">EMS</span>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="活动数据" align="right">
        <template #default="scope">
          <span>{{ empty(numberFormat(scope.row.activityData)) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="单位">
        <template #default="scope">
          <span>{{ empty(scope.row.activityDataUnit) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="数据来源">
        <template #default="scope">
          <span>{{ empty(scope.row.dataOrigin) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="负责部门">
        <template #default="scope">
          <span>{{ empty(scope.row.dataAccessDepartment) }}</span>
        </template>
      </vxe-column>
    </CTable>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, withDefaults, watch } from 'vue';
import { useList } from './useList';
import { CTable } from '@/components/CTable/index';
import { empty, getI18nNameBySeparator, numberFormat } from '@/utils/index';

interface IProps {
  standard: string;
}
const props = withDefaults(defineProps<IProps>(), {
  standard: ''
});
const { dataSource, extraTableOption, loadData, loading } = useList(props);
watch(
  () => props.standard,
  () => {
    loadData();
  }
);
</script>

<style lang="scss" scoped>
.factor-list-container {
  min-height: 80%;
}
.ems-tag {
  flex-shrink: 0;
  display: inline-block;
  width: 38px;
  height: 18px;
  background: #edf2f5;
  border-radius: 2px;
  line-height: 18px;
  text-align: center;
  color: #9196a3;
  font-size: 12px;
  margin-left: 4px;
}
.ems-label {
  display: inline-block;
}
</style>
